<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Bing Maps Canvas Layer - Simple Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body onload="loadMap();">

<div id='mapDiv' style="width:100%; height: 100%;"></div>

<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript">


    function loadMap()
    {
        var MM = Microsoft.Maps;
        var map = new MM.Map(document.getElementById("mapDiv"), {
            center: new MM.Location(39.5, -8),
            mapTypeId: MM.MapTypeId.road,
            zoom: 7,
            credentials:"YOUR CREDENTIALS"});

        MM.registerModule("CanvasTileLayerModule", "js/CanvasTileLayerModule.js");
        MM.loadModule("CanvasTileLayerModule", {
            callback: function () {
                new CanvasTileLayer(map,
                        {
                            debugMode: false,
                            drawTile: function(context, tile) {

                                //canvas drawing code taken from:
                                //http://talkaboutstuff.hubpages.com/hub/HTML5-Canvas-Creating-a-smiley-face-with-the-ARC-API


                                // The Face
                                context.strokeStyle = '#0000FF';
                                context.fillStyle = '#FFFF00';
                                context.lineWidth = 4;
                                context.beginPath();
                                context.arc(120,120,50,0*Math.PI,2*Math.PI,true);
                                context.closePath();
                                context.stroke();
                                context.fill();

                                // The Smile
                                context.strokeStyle = '#FF0000';
                                context.lineWidth = 2;
                                context.beginPath();
                                context.arc(120,110,40,0.2*Math.PI,0.8*Math.PI,false);
                                context.stroke();

                                // The Left eye
                                context.strokeStyle = '#000000';
                                context.fillStyle = '#000000';
                                context.beginPath();
                                context.arc(100,105,10,0*Math.PI,2*Math.PI,false);
                                context.closePath();
                                context.stroke();
                                context.fill();

                                // The Right Eye
                                context.strokeStyle = '#000000';
                                context.fillStyle = '#000000';
                                context.beginPath();
                                context.arc(140,105,10,0*Math.PI,2*Math.PI,false);
                                context.closePath();
                                context.stroke();
                                context.fill();


                            }
                        });
            }});
    }

</script>
</body>
</html>